<template>
  <div class="search">
	<div class="box1">
		<div class="b"></div>
		<div class="a">
			<i class="fa fa-search"></i>
			<input type="text" placeholder="请搜索想要看的电影/电视剧/综艺" v-model="name" />
		</div>
	</div>
	<div class="box2">
		<div class="box2-film">
			<p class="film">电影/电视剧/综艺</p>
		</div>
	</div>
	<!-- <div class="box3">
		<div>
			<img src="../../public/images/001.png"/>
		</div>
		<div>
			<p class="text1">机械师2</p>
			<p class="text2">剧情，喜剧，犯罪</p>
			<p class="text3">2020-6-30</p>
		</div>
	</div> -->
	<!-- <div class="box4"></div> -->
	<!-- <ul v-if="searchResult.length > 0">
		<li v-for="item in searchResult" :key="item.id" class="box3">
			<div>
				<img :src="item.img">
			</div>
			<div>
				<p class="text1">{{item.course_name}}</p>
				<p class="text2">{{item.viewer}}</p>
				<p class="text2">{{item.actors}}</p>
				<p class="text2">{{item.nums}}</p>
			</div>
		</li>
	</ul> -->
	<ul >
		<li v-for="item in getDataList" :key="item.id" class="box3">
			<div>
				<img :src="item.img">
			</div>
			<div>
				<p class="text1">{{item.name}}</p>
				<p class="text2">{{item.viewer}}</p>
				<p class="text2">{{item.actors}}</p>
				<p class="text2">{{item.nums}}</p>
			</div>
		</li>
	</ul>
	
  </div>
</template>


<script>
	// import search from '@mock/search'
	export default{
		name:'search',
		data(){
			return{
				name:'',
				search:[],
				//搜索结果
				searchResult:[]
			}
		},
		// methods:{
		// 	searchAction(e){
		// 		const inputValue=e.target.value;
		// 		this.searchResult = this.search.filter((item) => {
		// 			if(item.course_name.includes(inputValue)){
		// 				return item;
		// 			}
		// 		})
		// 	}
		// },
		created(){
				this.getPlayData();
			},
			computed:{
				getDataList(){
					return this.search.filter(item => item.name.indexOf(this.name)>-1)
				}
			},
				methods:{
					getPlayData(){
						// 为给定 ID 的 user 创建请求
						// var that=this;
						axios.get('/mock/search.json')
						  .then(response => {
						    console.log(response);
							if(response.status==200){
								if(response.data && response.data.search){
									this.search=response.data.search;
								}
							}
						  })
						  .catch(function (error) {
						    console.log(error);
						  });
					}
				}
			}
		
</script>





<style scoped>
	.box1{
		background: #ccc;
		/* width: 100%; */
		height: 50px;
	}
	.b{
		height: 10px;
	}
	.a{
		background:white;
		width: 90%;
		height:30px ;
		border-radius: 8px;
		/* margin: 10px; */
		margin-left: 10px;
	}
	i{
		margin-left:5px ;
		margin-top: 5px;
		background-color: white;
	}
	input{
		border: 0;
		height: 20px;
		margin-left: 10px;
		width: 80%;
	}
	.box2-film{
		border-bottom: 2px solid #ccc;
	}
	.film{
		font-size: 20px;
		color: #ccc;
		font-weight: bold;
		margin: 10px;
	}
	.box3{
		width: 100%;
		display: flex;
		margin-top: 10px;
		border-bottom: 1px dashed  #ccc;
		
	}
	.box3 div{
		margin-left: 10px;
	}
	img{
		width: 70px;
	}
	.text1{
		font-size: 20px;
	}
	.text2{
		font-size: 15px;
		margin-top: 3px;
		color:#999999;
		white-space:nowrap;
	}
	.text3{
		font-size: 15px;
		margin-top: 5px;
	}
	.box4{
		margin-top: 10px;
		border-bottom: 1px dashed  #ccc;
	}
</style>

